<template>
  <a-modal v-model:visible="visible" draggable width="1080px" :footer="false">
    <template #title> {{ title }}</template>
    <a-row class="grid-demo" :gutter="24">
      <a-col :span="7">
        <OrganizationKeywordSearchTree
          v-if="visible"
          @select="handleChangeOrg"
        ></OrganizationKeywordSearchTree>
      </a-col>
      <a-col :span="17">
        <div>
          <div>
            <a-row class="grid-demo" :gutter="24">
              <a-col :span="9">
                <div>
                  <a-input-search
                    v-model="keyWords"
                    placeholder="请输入关键字"
                    search-button
                    @click="fetchData"
                  />
                </div>
              </a-col>
              <a-col :span="12">
                <div
                  ><a-button @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    {{ $t('searchTable.form.reset') }}
                  </a-button></div
                >
              </a-col>
            </a-row>
          </div>
          <div class="right-content">
            <div class="top">
              <a-row class="grid-demo">
                <a-col :span="10" class="left">
                  <div>
                    <div class="right-content-title">待选列表</div>
                    <div class="user-list">
                      <div
                        v-for="item in renderData"
                        :key="item.id"
                        class="user-list-item"
                        :style="{ color: item.isHighlight ? '#165dff' : '' }"
                        @click="selectUser(item.id)"
                        >{{ item.name }}</div
                      >
                    </div>
                  </div>
                </a-col>
                <a-col :span="4" class="middle">
                  <div>
                    <a-button
                      class="button"
                      type="outline"
                      size="small"
                      @click="add"
                      >添加</a-button
                    >
                    <a-button
                      v-if="props.multiple"
                      class="button"
                      type="primary"
                      size="small"
                      @click="erasure"
                      >删除</a-button
                    >
                    <a-button
                      v-if="props.multiple"
                      class="button"
                      type="primary"
                      size="small"
                      @click="addAll"
                      >全部添加</a-button
                    >
                    <a-button
                      class="button"
                      type="primary"
                      size="small"
                      @click="erasureAll"
                      >全部删除</a-button
                    >
                  </div>
                </a-col>
                <a-col :span="10" class="right">
                  <div>
                    <div class="right-content-title">已选列表</div>
                    <div class="user-list">
                      <div
                        v-for="item in addData"
                        :key="item.id"
                        class="user-list-item"
                        :style="{ color: item.isHighlight ? '#165dff' : '' }"
                        @click="selectAddUser(item.id)"
                        >{{ item.name }}</div
                      >
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
            <div class="middle1">
              <div class="footer">
                <a-space>
                  <a-button @click="handleClose">
                    {{ $t('setting.cancel') }}
                  </a-button>
                  <a-button type="primary" @click="onSubmit">
                    {{ $t('setting.save') }}
                  </a-button>
                </a-space>
              </div>
            </div>
            <div class="bottom">
              <div class="bottom-content">
                <span>描述：</span>
                <span v-for="item in addData" :key="item.id">
                  <span v-if="item.name">{{ item.name }}</span>
                  <span v-if="item.currentOrgName"
                    >-{{ item.currentOrgName }}</span
                  >
                </span>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { PositionByOrg } from '@/api/organization';
  import { selectPositionByOrgId } from '@/api/position';

  const visible = ref(false);
  const emit = defineEmits(['change']);
  // 当前选中的组织id
  const organizationId = ref();
  const renderData = ref<PositionByOrg[]>([]);
  const selectData = ref<PositionByOrg[]>([]);
  const addData = ref<PositionByOrg[]>([]);
  const keyWords = ref('');

  const props = defineProps({
    title: {
      type: String,
      default: '选择岗位',
    },
    multiple: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  });
  // 岗位
  const fetchData = async () => {
    try {
      const { data } = await selectPositionByOrgId(
        keyWords.value,
        organizationId.value
      );
      renderData.value = data.map((item: any) => ({
        ...item,
        isHighlight: false,
      }));
    } catch (err) {
      // you can report use errorHandler or other
    }
  };
  // 搜索
  const handleChangeOrg = (node: any) => {
    if (node && node.id) {
      organizationId.value = node.id;
      fetchData();
    }
  };
  // 重置
  const reset = () => {
    keyWords.value = '';
  };

  function handleChangeVisible(list: any) {
    visible.value = !visible.value;
    if (visible.value) addData.value = JSON.parse(JSON.stringify(list));
    else {
      addData.value = [];
    }
  }

  // 选择用户(未选区)
  const selectUser = (id: string) => {
    renderData.value.forEach((item: any) => {
      if (item.id === id) {
        item.isHighlight = !item.isHighlight;
      } else {
        item.isHighlight = false;
      }
    });
  };
  // 选择用户（已选区）
  const selectAddUser = (id: string) => {
    addData.value.forEach((item) => {
      if (item.id === id) {
        item.isHighlight = !item.isHighlight;
      } else {
        item.isHighlight = false;
      }
    });
  };
  // 添加
  const add = () => {
    const checkedDataIds = renderData.value
      .filter((x: any) => x.isHighlight)
      .map((y: any) => y.id);
    let isResver = false;
    if (checkedDataIds && checkedDataIds.length > 0) {
      addData.value.forEach((item: any) => {
        if (checkedDataIds.includes(item.id)) {
          isResver = true;
        }
      });
      if (isResver) {
        Message.warning('不能添加相同数据');
      } else {
        addData.value = props.multiple
          ? [
              ...addData.value,
              ...renderData.value.filter((item: any) => item.isHighlight),
            ]
          : renderData.value.filter((item: any) => item.isHighlight);
      }
    } else {
      Message.warning('请先选择数据');
    }
    renderData.value.forEach((item) => {
      item.isHighlight = false;
    });
  };
  // 删除
  const erasure = () => {
    const checkedDataIds = renderData.value
      .filter((x: any) => x.isHighlight)
      .map((y: any) => y.id);
    addData.value = addData.value.filter(
      (item: any) => !checkedDataIds.includes(item.id)
    );
  };
  // 全部添加
  const addAll = () => {
    renderData.value.forEach((item) => {
      item.isHighlight = true;
    });
    add();
  };
  // 全部删除
  const erasureAll = () => {
    addData.value = [];
  };
  // 取消
  const handleClose = () => {
    visible.value = !visible.value;
    selectData.value = [];
    addData.value = [];
  };
  // 保存
  function onSubmit() {
    emit('change', addData.value);
    selectData.value = [];
    addData.value = [];
    visible.value = !visible.value;
  }

  defineExpose({ handleChangeVisible });
</script>

<style scoped lang="less">
  .content-left-title {
    width: 100%;
    border: 1px solid #165dff;
    text-align: center;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 0px 1px 1px 0px;
  }
  .right-content {
    margin-top: 15px;
    width: 100%;
    min-height: 500px;
    .top {
      min-height: 400px;
      width: 100%;
      border: 1px solid #f2f3f5;
      .grid-demo {
        height: 400px;
        .left {
          width: 100%;
          border-right: 1px solid #f2f3f5;
          height: 100%;
        }
        .middle {
          width: 100%;
          height: 100%;
          text-align: center;
          padding-top: 40px;
        }
        .right {
          width: 100%;
          border-left: 1px solid #f2f3f5;
          height: 100%;
        }
      }
    }
    .middle1 {
      padding-top: 15px;
      width: 100%;
      min-height: 60px;
      border: 1px solid #f2f3f5;
      text-align: center;
    }
    .bottom {
      width: 100%;
      min-height: 60px;
      border: 1px solid #f2f3f5;
      .bottom-content {
        padding-left: 5px;
      }
    }
  }
  .right-content-title {
    height: 40px;
    line-height: 38px;
    border: 1px solid #f2f3f5;
    font-size: 16px;
    padding-left: 10px;
  }
  .user-list {
    height: 350px;
    overflow: auto;
    .user-list-item {
      width: 100%;
      height: 20px;
      line-height: 18px;
      padding: 0 0 5px 5px;
      cursor: pointer;
    }
  }
  .button {
    width: 80px;
    margin-bottom: 10px;
  }
  .tree {
    width: 100%;
    height: 520px;
    border: 1px solid #f2f3f5;
    margin-top: 15px;
  }
</style>
